Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Small screen mode for palettes #34

Closed
wants to merge 11 commits into from
Closed

Small screen mode for palettes #34

wants to merge 11 commits into from

Conversation

blurymind
Copy link
Contributor

@blurymind blurymind commented Jun 4, 2021 •
edited
Loading

This PR introduces a new small screen mode for the GUI to make it easier to use on smartphones

  • Chickenpaint works just as before on normal sized screens

When on small screen:

  • the palette close button disappears, as it is too easy to tap by mistake and bringing a palette back from the menu is a pain in the neck on a smartphone
  • a new behaviour is added to the palette headers. Tapping on it makes it toggle the visibility of its body on/off. This allows us to easily and quickly toggle it when we need it
  • On some controls - such as for example when selecting a tool - the palette is smart enough to automatically toggle itself off as it correctly assumes that the user has performed the action (similar to how artrage and other mobile painting apps work). We can do the same for when the user selects another layer, swatch or brush mode.
  • You can still move palettes around by dragging them by the header as before.

Peek 2021-05-24 20-48

I also added palette toggle buttons that will show up in place of that giant Chickenpaint text when on small screens:
image

they do the same thing the palettes menu in the dropdown does but in a single click instead of three clicks. It would be nice if they get icons of course, for now they are using the mnemonic single letter.

(Tested on a Galaxy note 10 smartphone, does improve the drawing experience a lot as it makes the widgets get out of the way of the canvas as well as making them easier to quickly access and dismiss/close)

closes #32

@blurymind blurymind mentioned this pull request Jun 4, 2021
Open
@blurymind blurymind changed the title Mobile layout buttons Small screen mode for palettes Jun 4, 2021
@thenickdude
Copy link
Owner

Thanks! I'm currently working on merging this with new global full-screen and small-screen handling

@blurymind
Copy link
Contributor Author

thanks, no worries :) thank you for looking into this.

Btw I can simplify the pr so it doesnt do the palette collapse feature if you want to. To me being able to have those quick access header buttons for easy access makes a huge difference already

@thenickdude
Copy link
Owner

thenickdude commented Jul 14, 2021 •
edited
Loading

I've merged and published this now! Thanks for the PR!

I made a bunch of improvements to palette layout that should make it a lot nicer to use on small screens.

I've updated the example page so you can try it out there, it goes fullscreen automatically on small screens due to the fullScreenMode: "auto" setting provided:

https://thenickdude.github.io/chickenpaint-example/

@blurymind
Copy link
Contributor Author

thank you for working on this :)
It would be nice if some (like the tool selector) can be automatically dismissed when used, but this is already a huge upgrade for mobile screens

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add small screen mode behaviour to Palettes - feature pitch
2 participants
@blurymind @thenickdude